<template>
  <div class="componentList">
    <!-- ********** 小组件 ********** -->
    <!-- 导航栏 -->
    <Navbar v-if="com == 'navbar'" :widgetData="widgetData" :type="type" :mapData="mapData"></Navbar>
    <!-- 海报位 -->
    <Poster v-if="com == 'Poster'" :widgetData="widgetData" :type="type" :mapData="mapData"></Poster>
    <!-- 文字海报 -->
    <Textposter v-if="com == 'Textposter'" :widgetData="widgetData" :type="type" :mapData="mapData"></Textposter>
    <!-- 轮播海报 -->
    <BannerBar v-if="com == 'BannerBar'" :widgetData="widgetData" :type="type" :mapData="mapData"
      :bannerIndex="bannerIndex" :bannerSiteCode="bannerSiteCode" :ispreview="ispreview" @preView="getPreView"
      @addImg="getAddImg" @deleteItem="getDeleteItem">
    </BannerBar>
    <!-- 视频框 -->
    <VideoBar v-if="com == 'VideoBar'" :widgetData="widgetData" :type="type" :mapData="mapData"></VideoBar>
    <!-- 轮播视频 -->
    <BannerVideo v-if="com == 'BannerVideo'" :widgetData="widgetData" :type="type" :mapData="mapData"
      :bannerVideoIndex="bannerVideoIndex" :bannerVideoSideCode="bannerVideoSideCode" @checkedTitle="checkedTitle">
    </BannerVideo>
    <!-- 轮播视频 —— 定制 -->
    <BannerVideo1 v-if="com == 'BannerVideo1'" :widgetData="widgetData" :type="type" :mapData="mapData">
    </BannerVideo1>

    <!-- ********** 定制组件-普通海报 ********** -->
    <!-- 一行三列 -->
    <RowThreeColPoster v-if="com == 'RowThreeColPoster'" :widgetData="widgetData" :mapData="mapData" :type="type"
      @configData="configData" :customMadeSiteCode="customMadeSiteCode">
    </RowThreeColPoster>
    <!-- 一行六列 -->
    <RowSixColPoster v-if="com == 'RowSixColPoster'" :widgetData="widgetData" :mapData="mapData" :type="type"
      @configData="configData" :customMadeSiteCode="customMadeSiteCode">
    </RowSixColPoster>
    <!-- 一行十列 -->
    <RowTenColPoster v-if="com == 'RowTenColPoster'" :widgetData="widgetData" :mapData="mapData" :type="type"
      @configData="configData" :customMadeSiteCode="customMadeSiteCode">
    </RowTenColPoster>

    <!-- ********** 定制组件-文字海报 ********** -->
    <!-- 一行两列 -->
    <RowTwoColText v-if="com == 'RowTwoColText'" :widgetData="widgetData" :mapData="mapData" :type="type"
      @configData="configData" :customMadeSiteCode="customMadeSiteCode">
    </RowTwoColText>
    <!-- 一行三列 -->
    <RowThreeColText v-if="com == 'RowThreeColText'" :widgetData="widgetData" :mapData="mapData" :type="type"
      @configData="configData" :customMadeSiteCode="customMadeSiteCode">
    </RowThreeColText>
    <!-- 一行四列 -->
    <RowFourColText v-if="com == 'RowFourColText'" :widgetData="widgetData" :mapData="mapData" :type="type"
      @configData="configData" :customMadeSiteCode="customMadeSiteCode">
    </RowFourColText>
    <!-- 一行六列 -->
    <RowSixColText v-if="com == 'RowSixColText'" :widgetData="widgetData" :mapData="mapData" :type="type"
      @configData="configData" :customMadeSiteCode="customMadeSiteCode">
    </RowSixColText>
  </div>
</template>

<script>
// 小组件
import Navbar from '@/components/visualization/model/widgetList/navbar.vue'; //导航栏
import Poster from '@/components/visualization/model/widgetList/poster.vue'; //海报位
import Textposter from '@/components/visualization/model/widgetList/textposter.vue'; //文字海报
import BannerBar from '@/components/visualization/model/widgetList/bannerBar.vue'; //轮播海报
import VideoBar from '@/components/visualization/model/widgetList/videoBar.vue'; //视频框
import BannerVideo from '@/components/visualization/model/widgetList/bannerVideo.vue'; //轮播视频
import BannerVideo1 from '@/components/visualization/model/widgetList/bannerVideo1.vue'; //轮播视频-定制

// 定制组件-普通海拔
import RowThreeColPoster from '@/components/visualization/model/customMadeWidget/rowThreeColPoster.vue'; //1-3
import RowSixColPoster from '@/components/visualization/model/customMadeWidget/rowSixColPoster.vue'; //1-6
import RowTenColPoster from '@/components/visualization/model/customMadeWidget/rowTenColPoster.vue'; //1-10
// 定制组件-文字海报
import RowTwoColText from '@/components/visualization/model/customMadeWidget/rowTwoColText.vue'; //1-2
import RowThreeColText from '@/components/visualization/model/customMadeWidget/rowThreeColText.vue'; //1-3
import RowFourColText from '@/components/visualization/model/customMadeWidget/rowFourColText.vue'; //1-4
import RowSixColText from '@/components/visualization/model/customMadeWidget/rowSixColText.vue'; //1-6

export default {
  name: "componentList",
  components: {
    Navbar, Poster, Textposter, BannerBar, VideoBar, BannerVideo, BannerVideo1,
    RowThreeColPoster, RowSixColPoster, RowTenColPoster,
    RowTwoColText, RowThreeColText, RowFourColText, RowSixColText
  },
  props: {
    com: {
      type: String,
      required: true,
    },
    widgetData: {
      type: Object,
      required: true
    },
    type: {
      type: String,
      default: 'widgetList'
    },
    // 轮播海报
    bannerIndex: {//模板参数
      type: Number,
      default: 0
    },
    bannerSiteCode: {//瀑布流参数
      type: String,
      default: ''
    },
    // 轮播视频
    bannerVideoIndex: {//模板参数
      type: Number,
      default: 0
    },
    bannerVideoSideCode: {//瀑布流参数
      type: String,
      default: ''
    },
    // 定制组件
    customMadeSiteCode: {
      type: String,
      default: ""
    },
    // 热力图
    mapData: {
      type: Array,
      default: () => []
    },
    ispreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    // 轮播海报添加图片
    getAddImg() {
      let data = {};
      if (this.com == 'BannerBar') { data = this.widgetData; };
      this.$emit('getAddImg', data);
    },
    // 轮播海报预览图片
    getPreView(e, item, index, data) {
      this.$emit('getPreView', e, item, index, data);
    },
    // 轮播海报删除图片
    getDeleteItem(index) {
      let data = {};
      if (this.com == 'BannerBar') { data = this.widgetData; };
      this.$emit('getDeleteItem', index, data);
    },
    // 轮播视频预览海报
    checkedTitle(e, item, index, data) {
      this.$emit('checkedTitle', e, item, index, data);
    },
    // 定制组件
    configData(e, item, items) {
      this.$emit('configData', e, item, items)
    }
  },
}
</script>

<style lang="scss" scoped>
.componentList {
  width: 100%;
  height: 100%;
}
</style>